<template>
    <div class="home-container">
        <!-- 轮播图区域 -->
        <Carousel autoplay loop>
            <CarouselItem>
                <div class="demo-carousel"><img src="../../assets/imgs/lun1.png" alt=""></div>
            </CarouselItem>
            <CarouselItem>
                <div class="demo-carousel"><img src="../../assets/imgs/lun2.png" alt=""></div>
            </CarouselItem>
            <CarouselItem>
                <div class="demo-carousel"><img src="../../assets/imgs/lun3.png" alt=""></div>
            </CarouselItem>
        </Carousel>
        <!-- 内容区域 -->
        <b-container class="bv-example-row">
            <!-- 1楼 闲贰优品区域 -->
            <div class="one-floor">
                <b-row align-h="center">
                    <b-col cols="4" class="contain-title">
                        <h1 class="titleLine"><span>1F</span> 闲贰优品</h1>
                    </b-col>
                </b-row>
                <b-row>
                    <b-col cols="6" sm="6" md="3" lg="3" v-for="item in topByViewList" :key="item.gId">
                        <Card>
                            <div class="box-item">
                                <router-link :to="'/goodsInfo/' + item.gId">
                                    <img :src="item.mainPic">
                                </router-link>
                                <div class="box-item-text">
                                    <h5><router-link :to="'/goodsInfo/' + item.gId" class="goods-title">{{item.gTitle}}</router-link></h5>
                                    <div class="goods-item">
                                        <span class="goods-price">￥{{item.gPrice}}</span>
                                        <span class="view-num"><Icon type="ios-eye" />{{item.gViewNum}} 浏览</span>
                                    </div>
                                    <div class="user-info">
                                        <router-link :to="'/userInfo/' + item.users.uId">
                                        <img :src="item.users.uAvatar" alt=""></router-link>
                                        <p class="user-name">{{item.users.uName}}</p>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </b-col>
                </b-row>
            </div>
            <!-- 2楼 最新上架区域 -->
            <div class="two-floor">
                <b-row align-h="center">
                    <b-col cols="4" class="contain-title">
                        <h1 class="titleLine-two"><span>2F</span> 最新上架</h1>
                    </b-col>
                </b-row>
                <b-row>
                    <b-col cols="6" sm="6" md="3" lg="3" v-for="item in topByTimeList" :key="item.gId">
                        <Card>
                            <div class="box-item">
                                <router-link :to="'/goodsInfo/' + item.gId">
                                    <img :src="item.mainPic">
                                </router-link>
                                <div class="box-item-text">
                                    <h5><router-link :to="'/goodsInfo/' + item.gId" class="goods-title">{{item.gTitle}}</router-link></h5>
                                    <div class="goods-item">
                                        <span class="goods-price">￥{{item.gPrice}}</span>
                                        <span class="view-num"><Icon type="ios-eye" />{{item.gViewNum}} 浏览</span>
                                    </div>
                                    <div class="user-info">
                                        <router-link :to="'/userInfo/' + item.users.uId">
                                        <img :src="item.users.uAvatar" alt=""></router-link>
                                        <p class="user-name">{{item.users.uName}}</p>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </b-col>
                </b-row>
            </div>
            <!-- 3楼 放心买区域 -->
            <div class="three-floor">
                <b-row align-h="center">
                    <b-col cols="4" class="contain-title">
                        <h1 class="titleLine-three">
                            <span>3F</span>
                            <img src="https://www.paipai.com/paipai-pc/static/img/title.097847b.png" alt="">
                        </h1>
                    </b-col>
                </b-row>
                <b-row>
                    <b-col cols="6" sm="6" md="3" lg="3">
                        <Card>
                            <div class="box-item">
                                <router-link to="/goodsList">
                                    <img src="../../assets/imgs/buy1.png">
                                </router-link>
                            </div>
                        </Card>
                    </b-col>
                    <b-col cols="6" sm="6" md="3" lg="3">
                        <Card>
                            <div class="box-item">
                                <router-link to="/goodsList">
                                    <img src="../../assets/imgs/buy2.png">
                                </router-link>
                            </div>
                        </Card>
                    </b-col>
                    <b-col cols="6" sm="6" md="3" lg="3">
                        <Card>
                            <div class="box-item">
                                <router-link to="/goodsList">
                                    <img src="../../assets/imgs/buy3.png">
                                </router-link>
                            </div>
                        </Card>
                    </b-col>
                    <b-col cols="6" sm="6" md="3" lg="3">
                        <Card>
                            <div class="box-item">
                                <router-link to="/goodsList">
                                    <img src="../../assets/imgs/buy4.png">
                                </router-link>
                            </div>
                        </Card>
                    </b-col>
                </b-row>
            </div>
            <!-- 4楼 儿童专区区域 -->
            <div class="four-floor">
                <b-row align-h="center">
                    <b-col cols="4" class="contain-title">
                        <h1 class="titleLine-four"><span>4F</span> 儿童专区</h1>
                    </b-col>
                </b-row>
                <b-row>
                    <b-col cols="6" sm="6" md="3" lg="3" v-for="item in childList.slice(0, 4)" :key="item.gId">
                        <Card>
                            <div class="box-item">
                                <router-link :to="'/goodsInfo/' + item.gId">
                                    <img :src="item.mainPic">
                                </router-link>
                                <div class="box-item-text">
                                    <h5><router-link :to="'/goodsInfo/' + item.gId" class="goods-title">{{item.gTitle}}</router-link></h5>
                                    <div class="goods-item">
                                        <span class="goods-price">￥{{item.gPrice}}</span>
                                        <span class="view-num"><Icon type="ios-eye" />{{item.gViewNum}} 浏览</span>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </b-col>
                </b-row>
            </div>
            <!-- 5楼 服饰专区区域 -->
            <div class="five-floor">
                <b-row align-h="center">
                    <b-col cols="4" class="contain-title">
                        <h1 class="titleLine-five"><span>5F</span> 服饰专区</h1>
                    </b-col>
                </b-row>
                <b-row>
                    <b-col cols="6" sm="6" md="3" lg="3" v-for="item in closeList.slice(0, 4)" :key="item.gId">
                        <Card>
                            <div class="box-item">
                                <router-link :to="'/goodsInfo/' + item.gId">
                                    <img :src="item.mainPic">
                                </router-link>
                                <div class="box-item-text">
                                    <h5><router-link :to="'/goodsInfo/' + item.gId" class="goods-title">{{item.gTitle}}</router-link></h5>
                                    <div class="goods-item">
                                        <span class="goods-price-two">￥{{item.gPrice}}</span>
                                        <span class="view-num"><Icon type="ios-eye" />{{item.gViewNum}} 浏览</span>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </b-col>
                </b-row>
            </div>
            <!-- 6楼 卖在闲贰区域 -->
            <div class="six-floor">
                <b-row align-h="center">
                    <b-col cols="4" class="contain-title">
                        <h1 class="titleLine-six"><span>6F</span> 卖在闲贰</h1>
                    </b-col>
                </b-row>
                <b-row>
                    <b-col cols="6" sm="6" md="3" lg="3" v-for="item in orderList.slice(0,4)" :key="item.oiId">
                        <Card>
                            <div class="buy-item">
                                <router-link :to="'/userInfo/' + item.goods.gUid">
                                    <img :src="item.uAvatar" alt="">
                                </router-link>
                                <div class="buy-item-user">
                                    <p class="buy-name">{{item.uName}}</p>
                                    <p class="buy-title">卖出{{item.goods.gName}}，赚了<span class="goods-price"> {{item.oTotalAmount}} </span>元</p>
                                </div>
                            </div>
                        </Card>
                    </b-col>
                </b-row>
            </div>
            <!-- 7楼 闲贰保障区域 -->
            <div class="seven-floor">
                <b-row>
                    <b-col cols="6" sm="6" md="3" lg="3">
                        <div class="protected-item">
                            <img src="../../assets/imgs/p1.png" alt="">
                            <h5>7天无理由退货</h5>
                            <p>购买后7天内部满意，想退就退</p>
                        </div>
                    </b-col>
                    <b-col cols="6" sm="6" md="3" lg="3">
                        <div class="protected-item">
                            <img src="../../assets/imgs/p2.png" alt="">
                            <h5>360天免费质保</h5>
                            <p>360天内非人为质量问题，免费解决</p>
                        </div>
                    </b-col>
                    <b-col cols="6" sm="6" md="3" lg="3">
                        <div class="protected-item">
                            <img src="../../assets/imgs/p3.png" alt="">
                            <h5>如实描述不虚假</h5>
                            <p>交易透明，真实可见，无忧购买</p>
                        </div>
                    </b-col>
                    <b-col cols="6" sm="6" md="3" lg="3">
                        <div class="protected-item">
                            <img src="../../assets/imgs/p4.png" alt="">
                            <h5>专业质检放心购</h5>
                            <p>53项专业检测，一项不通过即淘汰</p>
                        </div>
                    </b-col>
                </b-row>
            </div>
        </b-container>

    </div>
</template>

<script>
export default {
  name: 'usersHome',
  data () {
    return {
      topByViewList: [], // 闲贰优品数据
      topByTimeList: [], // 最新上架数据
      childList: [], // 儿童专区数据
      closeList: [], // 服饰专区数据
      orderList: [] // 卖出订单数据
    }
  },
  created () {
    this.findTop()
    this.findTopNew()
    this.findChild()
    this.findClose()
    this.findAllPad()
  },
  methods: {
    // 查询浏览量最多的前8条数据
    findTop () {
      this.$axios({
        url: 'goods/topByViewNum',
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          this.topByViewList = res.data.list
          this.topByViewList.forEach(item => {
            this.$axios({
              url: 'goodsPicture/findMainPicByGoodsId/' + item.gId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.gpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 查询最新上架的前4条数据
    findTopNew () {
      this.$axios({
        url: 'goods/topNewTime',
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          this.topByTimeList = res.data.list
          this.topByTimeList.forEach(item => {
            this.$axios({
              url: 'goodsPicture/findMainPicByGoodsId/' + item.gId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.gpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 查询儿童专区的前4条数据
    findChild () {
      this.$axios({
        url: 'goods/queryByTypeTwoLevelId/8',
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          this.childList = res.data.pageInfo.list
          this.childList.forEach(item => {
            this.$axios({
              url: 'goodsPicture/findMainPicByGoodsId/' + item.gId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.gpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 查询服饰专区前4条数据
    findClose () {
      this.$axios({
        url: 'goods/queryByTypeTwoLevelId/16',
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          this.closeList = res.data.pageInfo.list
          this.closeList.forEach(item => {
            this.$axios({
              url: 'goodsPicture/findMainPicByGoodsId/' + item.gId,
              method: 'get'
            }).then(res => {
              if (res.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', res.data.object.gpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 查询付款成功了的订单列表
    findAllPad () {
      this.$axios({
        url: 'orders/findByOrderStatus',
        method: 'get'
      }).then(res => {
        if (res.data.code === 200) {
          this.orderList = res.data.list
          // 遍历订单，得到卖家头像和昵称
          res.data.list.forEach(item => {
            this.$axios({
              url: 'users/findById/' + item.goods.gUid,
              method: 'get'
            }).then(result => {
              if (result.data.code === 200) {
                this.$set(item, 'uAvatar', result.data.object.uAvatar)
                this.$set(item, 'uName', result.data.object.uName)
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
.buy-item-user {
    height: 70px;
}
.home-container{
    width: 100%;
    height: auto;
}
a{
    color:#555;
}
.bv-example-row{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.demo-carousel img{
    width: 100%;
    height:auto;
}
.contain-title{
    text-align: center;
    padding: 10px 0;
}
.titleLine {
    color: #ce2c0c;
    font-size: 20px;
}
.titleLine span {
    background: url(../../assets/imgs/y1.png) center top no-repeat;
    width: 34px;
    height: 34px;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 34px;
    margin-right: 10px;
}
.ivu-card{
    margin-bottom: 25px;
}
.box-item>a{
    display: block;
}
.box-item>a>img{
    width: 100%;
    height: auto;
}
.box-item-text h5{
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-top: 5px;
    height: 40px;
}
.box-item-text h5 a{
    color:#333;
}
.box-item-text h5 a:hover{
    text-decoration: none;
    color:#111;
}
.goods-item{
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
}
.goods-price{
    color:#f30;
}
.goods-price-two{
    color:#fff;
    background-color: #fa4137;
    border:1px solid #fa4137;
    display: inline-block;
    border-radius: 5px;
    font-size: 14px;
    padding: 2px 10px;
}
.view-num{
    color:#5a5a5a;
    font-size: 11px;
}
.user-info{
    display:flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.user-info img{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 4px #e2e2e2;
    margin-right: 10px;
}
.user-info .user-name{
    display: inline-block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color:#747474;
    margin-bottom: 0;
}
.titleLine-two {
    color: #ffa800;
    font-size: 20px;
}
.titleLine-two span {
    background: url(../../assets/imgs/y2.png) center top no-repeat;
    width: 34px;
    height: 34px;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 34px;
    margin-right: 10px;
}
.titleLine-three {
    color: #2a54cc;
    font-size: 20px;
}
.titleLine-three span {
    background: url(../../assets/imgs/y3.png) center top no-repeat;
    width: 34px;
    height: 34px;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 34px;
    margin-right: 10px;
}
.titleLine-three img{
    width: 210px;
    height:48px;
}
.titleLine-four {
    color: #c49e60;
    font-size: 20px;
}
.titleLine-four span {
    background: url(../../assets/imgs/y4.png) center top no-repeat;
    width: 34px;
    height: 34px;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 34px;
    margin-right: 10px;
}
.titleLine-five {
    color: #65473c;
    font-size: 20px;
}
.titleLine-five span {
    background: url(../../assets/imgs/y5.png) center top no-repeat;
    width: 34px;
    height: 34px;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 34px;
    margin-right: 10px;
}
.titleLine-six {
    color: #1667b8;
    font-size: 20px;
}
.titleLine-six span {
    background: url(../../assets/imgs/y6.png) center top no-repeat;
    width: 34px;
    height: 34px;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 34px;
    margin-right: 10px;
}
.buy-item{
    display: flex;
    justify-content: flex-start;
    align-items: start;
}
.buy-item>a{
    display: block;
}
.buy-item>a>img{
    width: 60px;
    height: 60px;
    border:1px solid #efefef;
    box-shadow: 0 0 4px #e2e2e2;
    border-radius: 30px 30px 0 30px;
    margin-right: 12px;
}
.buy-name{
    color:#65473c;
    margin-bottom: 10px;
}
.buy-title{
    font-size: 13px;
    margin-bottom: 0;
}
.protected-item{
    margin-top: 15px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.protected-item h5{
    padding: 10px 0 0 0;
    font-size: 16px;
}
.protected-item p{
    font-size: 12px;
}
</style>
